<template>
	<div id="Shangpinweihu">
		<h1 class="demo-form-inline" style="inline-heigth: 100px; text-align: center; margin: auto;">商品维护</h1>
		
		<!-- 表格 -->
		<el-table :data="commodityAry" style="width: 100%">
		  <el-table-column prop="id" label="编号" width="180">
		  </el-table-column>
		  <el-table-column prop="productName" label="商品名称" width="180">
		  </el-table-column>
		  <el-table-column prop="productPrice" label="商品报价">
			  </el-table-column>
		  <!--操作列-->
		  <el-table-column label="操作">
			  <template slot-scope="scope">
				<el-button size="small"
				round 
				type="primary"
				@click="maintenance(scope.$index,scope.row)">维护</el-button>
				<el-button size="small"
				round 
				type="primary"
				 @click="deletes(scope.$index,scope.row)">删除</el-button>
			  </template>
			</el-table-column>
		 </el-table>

		<!---分页组件-->
			 <el-pagination  style="inline-heigth: 100px; text-align: center; margin: auto;"
			 @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :current-page="pageNo"
				  :page-sizes="pageSizeList"
				  :page-size="pageSize"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="total">
			 </el-pagination>
			 
			 <!-- 添加对话框 -->
			    <el-dialog title="维护商品" :visible.sync="makeFormVisible"  >
			       <el-form >
			        
					<el-form-item label="编号" :label-width="formLabelWidth">
					  <el-input readonly  v-model="productOne.id"></el-input>
					</el-form-item>
					
			        
					  <el-form-item label="商品报价" :label-width="formLabelWidth">
					  <el-input  v-model="productOne.productPrice"></el-input>
					   </el-form-item>				  
			       </el-form>
				   <div slot="footer" class="dialog-footer">
					   
				     <el-button @click="makeFormVisible = false">取消</el-button>
				    
						<el-button type="primary" @click="saveStorageCell(productOne)">确定</el-button>   
					
				   </div>
			     </el-dialog>
							 
	</div>
	
	
</template>

<script>
	export default {
	      data() {
	        return {
	         commodityAry: [],
			 makeFormVisible:false,
			 //回显商品对象
			 productOne:{},
	          // 当前页号
	          pageNo: 1,
	          // 当前页大小
	          pageSize: 2,
	          // 总记录数
	          total: 0,
	          // 页大小列表
	          pageSizeList: [2, 5, 10, 20],
	          //查询条件
	        }
	      },
		  
		  methods:{
				  // 页大小改变
				  handleSizeChange(val) {
					  this.pageSize = val
					  this.commodity()
				  },
				  
				//页号改变
				handleCurrentChange(val) {
					this.pageNo = val
					// 重新查询
					this.commodity()
				},
			  	//分页查询采购订单表
			  	async commodity() { 
			  		// 用es6的解构函数
					let uid=sessionStorage.getItem("token")
			  		const {data: res} = await this.$http.post
			  		(`buy/productSupplier/commodity/${this.pageNo}/${this.pageSize}/${uid}`)
			  		this.commodityAry = res.list
			  		this.total = res.total
			  	},
				//点击维护显示对话框
				async maintenance(index,row){
					
					this.makeFormVisible = true
					const {data: res} = await this.$http.post(`buy/productSupplier/showdisplay/${row.id}`)
					
					    this.productOne=res
					
				},
				//点击确定维护成功
				async saveStorageCell(data){
						let userId=sessionStorage.getItem("token")
						const {data: res} = await this.$http.post(`buy/productSupplier/weihu`,data)
						this.commodity()
						this.$message({
							makeFormVisible: true,
							message:'维护成功',
							type:'success'
						});
						this.makeFormVisible=false
				},		  
				//点击删除根据id删除
				async deletes(index,row){
					const {data: res} = await this.$http.post(`buy/productSupplier/deletes/${row.id}`)
					    this.total = res.total
						this.commodity()
						this.$message({
							makeFormVisible: true,
							message:'删除成功',
							type:'success'
						});
					}
				},
		  created() {
		  	this.commodity()
		  }
	    }
	
</script>

<style>
</style>